<template>
  <div style="height:400px;position: relative;">
    <div style="width: 100%;overflow: hidden;">
      <div class="conditions-item">
        执行处室:
        <el-select v-model="deptId"
                   size="small"
                   :clearable="true"
                   placeholder="请选择执行处室"
                   @change="getDeptList"
                   style="width: 160px;">
          <el-option v-for="item in deptList"
                     :key="item.bmid"
                     :label="item.bmjc"
                     :value="item.bmid"></el-option>
        </el-select>
      </div>
    </div>
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  var colorList = [
    '#FF7723',
    '#0263FF',
    '#23C4D9',
    '#13A55A',
    '#FFDF3C',
    '#FF6A8D', '#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'
  ]
  var listData = []
  export default {
    components: {
      IEcharts
    },
    props: {
      dateItem: {
        type: String,
        default: ''
      },
      dateList: {
        type: Array,
        default: []
      }
    },
    watch: {
      dateItem: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              // console.log('cao1')
              this.dateType = 'i'
              this.getDeptList()
            }

          }
        },
        deep: true
      },
      dateList: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue.length !== 0) {
              this.dateType = 'd'
              this.getDeptList()
              // console.log('cao2')
            }

          }
        },
        immediate: true,
        deep: true
      },
    },
    data () {
      return {
        dateType: 'i',
        deptList: [],
        deptId: '',
        jqTimelist: {
          color: colorList,
          grid: {
            left: '20%',
            right: '25%',
            top: '80px',
            bottom: '50px',
            containLabel: false
          },
          //全局退回件率统计
          title: {
            text: '处室退回件数统计',
            x: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '65%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                normal: {
                  formatter: function (params) {
                    return '{icon|●}{name|' + listData[params.dataIndex].name + '：}{value|' +
                      listData[params.dataIndex].value + '}'
                  },
                  show: true,
                  rich: {
                    icon: {
                      fontSize: 16,
                      padding: [0, 0, 20, 0],
                    },
                    name: {
                      fontSize: 14,
                      padding: [0, 10, 20, 4],
                      color: '#666666'
                    },
                    value: {
                      fontSize: 18,
                      padding: [0, 0, 20, 0],
                      fontWeight: 'bold',
                      color: '#333333'
                    }
                  }
                },

              },
              labelLine: {
                normal: {
                  smooth: 0.9,
                  length: 30,
                  length2: 10,
                }
              },
              data: [
              ]
            }
          ]
        },
        xlpeoplenum: [] // 学历展示数据用的    条形统计图
      }
    },
    created () {
      this.getDeptList()

    },
    methods: {
      getDeptList () {
        this.$axios.post(this.$api.dept.selector).then(rs => {
          if (rs) {
            this.deptList = rs
            if(this.deptId==''){
              this.deptId = rs[0].bmid
            }
            console.log('deptList', this.deptList)
            this.$nextTick(function () {
              this.getjqsjList()
            })
          }

        })
      },
      getjqsjList () {
        let datas = {
          dateType: this.dateType,
          deptId: this.deptId,
          dateItem: this.dateItem,
          dateList: this.dateList
        }
        this.$axios.post('/count/workCharts/SendBackType', datas).then(res => {
          if (res) {
            this.jqTimelist.series[0].data = res.map(item => {
              return { value: item.value, name: item.name }
            })
            listData = this.jqTimelist.series[0].data
            // let zs = res.map(item =>
            //   item.value
            // )
            // let sum = 0
            // for (let index = 0; index < zs.length; index++) {
            //   sum += zs[index]
            // }
            // console.log(sum, 777777);
          }
        })
      },

    }

  }
</script>

<style lang='scss' scoped>
  .conditions-item {
    float: right;
  }
</style>
